<template>
  <div>
    <Card>
      <div slot="title">
        <span>商品分类</span>
        <el-button type="primary" @click="addSort" size="small">添加分类</el-button>
      </div>
      <div slot="content">
        <el-table ref="goodsSort" :data="sortData" style="width: 100%">
          <el-table-column type="index" :index="indexMethod" label="序号" width="120">
          </el-table-column>
          <el-table-column label="分类名称" width="280">
            <template slot-scope="scope">
              <span v-if="scope.row.isShow">{{scope.row.cateName}}</span>
              <el-input v-else v-model="scope.row.cateName" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="是否启用" width="280">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
              <el-switch v-model="scope.row.state" :disabled="scope.row.isShow"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.isShow" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" v-else @click="handleFinish(scope.$index, scope.row)" type="success">完成</el-button>
              <el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog title="添加分类" :visible.sync="isshow">
          <el-form :model="editSortData">
            <el-form-item label="分类名称" label-width="80px">
              <el-input v-model="editSortData.cateName" autocomplete="off" placeholder="分类名称"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" label-width="80px">
              <el-switch v-model="editSortData.state"></el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false">取 消</el-button>
            <el-button type="primary" @click="addcate">确 定</el-button>
          </div>
        </el-dialog>

      </div>

    </Card>

  </div>
</template>

<script>
import Card from "@/components/Card.vue";
import {
  getCatelist_api,
  editcate_api,
  delcate_api,
  addcate_api,
} from "@/api/goods.js";
export default {
  components: {
    Card,
  },
  data() {
    return {
      sortData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      editSortData: {
        state: false,
      },
      isshow: false,
    };
  },

  methods: {
    //自定义序号
    indexMethod(index) {
      return index + 1 + (this.currentPage - 1) * this.pageSize;
    },
    //编辑
    handleEdit(index, row) {
      row.isShow = false;
    },
    //完成-->向后端发送修改分类的请求
    async handleFinish(index, row) {
      await editcate_api({
        id: row.id,
        cateName: row.cateName,
        state: row.state,
      });
      row.isShow = true;
    },

    //删除
    async handleDelete(index, row) {
      //向后端发送数据
      this.$confirm("你确定要删除该分类吗？不可逆哦！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delcate_api({ id: row.id });
          this.getCatelist();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加分类
    addSort() {
      this.isshow = true;
    },
    async addcate() {
      let { cateName, state } = this.editSortData;
      let res = await addcate_api({
        cateName,
        state,
      });
      if (res.data.code === 0) {
        this.editSortData = { state: false };
        this.isshow = false;
        this.getCatelist();
      }
    },

    //当当前页发生改变时触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCatelist();
    },
    //获取分类列表
    async getCatelist() {
      let res = await getCatelist_api({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      });
      if (res.data.data.length == 0 && this.currentPage != 1) {
        this.currentPage--;
        this.getCatelist();
      }
      //1.将state状态由1/2-->true/false
      //2.添加一个新的字段，控制编辑和完成状态
      res.data.data.forEach((item) => {
        item.state = item.state == 1 ? true : false;
        item.isShow = true;
      });
      this.sortData = res.data.data;
      this.total = res.data.total;
    },
  },
  //在创建后调用
  created() {
    this.getCatelist();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-card__body {
  padding-top: 10px;
}
/deep/.el-pagination {
  margin-top: 15px;
}
/deep/.el-dialog {
  width: 500px;
}
.el-form {
  /deep/.el-input {
    width: 220px;
  }
}
/deep/.clearfix {
  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
// /deep/.cell {
//   .el-input__inner {
//     width: 200px;
//     height: 36px;
//   }
// }
</style>